<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta
			name="viewport"
			content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
		/>
		<title>video</title>
		<style>
			html,
			body {
				width: 100%;
				height: 100%;
				margin: 0;
				box-sizing: border-box;
			}
			.main {
				height: 100%;
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
			}
			video {
				height: 300px;
			}
		</style>
		<script>
			function getType() {
				return navigator.userAgent;
			}

			function getStatus() {
				const video = document.querySelector('#customVideo');
				console.log(`当前视频是否播放: ${video.paused ? '否' : '是'}`);
			}
		</script>
	</head>
	<body>
		<div class="main">
			<video
				id="customVideo"
				type="video/mp4"
				autoplay
				controls
				loop
				poster="http://www.jcgov.gov.cn/masvod/public/2022/02/15/139114.images/v139114_b1644891790493.jpg"
				src="http://www.jcgov.gov.cn/masvod/public/2022/02/15/20220215_17efb30b99a_r1_1200k.mp4"
			></video>
		</div>
	</body>
</html>
